import React from 'react';
import createG2 from 'g2-react';

const data = [
  { procedure: '0501', time: 12, time2: [12, 20] },
  { procedure: '0502', time: 12, time2: [12, 14] },
  { procedure: '0503', time: 14, time2: [14, 16] },
  { procedure: '0504', time: 16, time2: [16, 18] },
  { procedure: '0505', time: 14, time2: [14, 20] },
  { procedure: '0506', time: 20, time2: [20, 20] },
];
class DayCheck extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      height: 350,
    };
  }
  render() {
    const Chart = createG2((chart) => {
      chart.col(
        'procedure', {
          alias: '种类 ',
        }
      );
      chart.axis('procedure', {
        title: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.col(
        'time', {
          alias: '合格率',
          tickCount: 6,
          min: 0,
          formatter: function (val) {
            return val;
          },
        }
      );
      chart.axis('time', {
        title: {
          fontSize: '12',
          fill: '#ffffff',
        },
        grid: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.axis('time2', false);
      chart.col(
        'time2', {
          alias: '',
          tickCount: 6,
          min: 0,
          formatter: function (val) {
            return val;
          },
        }
      );
      chart.legend(false);
      chart.interval().position('procedure*time').color('procedure', ['#67E38D']);
      chart.interval().position('procedure*time2').color('procedure', ['#F14E4E']);
      chart.tooltip(false);
      chart.render();
    });
    return (
      <div style={{ paddingTop: 10 }}>
        <Chart
          data={data}
          width={500}
          height={this.state.height}
          forceFit
        />
      </div>
    );
  }
}

export default DayCheck;
